/*
 * _mixins v0.10
 * niu.com
 */
// 主题风格颜色
$blue:#56AAFF; //主题色
$pblue:rgba(86, 170, 255, 0.15); //淡蓝色
$status:#A2E2C8; //状态色，青
$red:#FF0000; //价格色，红

@mixin placeholder($color) {
  input::-webkit-input-placeholder {
    color: $color;
  }
  input:-moz-placeholder {
    color: $color;
  }
  input::-moz-placeholder {
    color: $color;
  }
  input:-ms-input-placeholder {
    color: $color;
  }
}

@mixin border1px($bc: #000, $side: all, $br: 0, $bs: solid) {
  position: relative;
  & > * {
    position: relative;
    z-index: 2;
  }
  &:after {
    position: absolute;
    z-index: 1;
    content: "";
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @if $side==all {
      border: 1px $bs $bc; /*no*/
    } @else {
      $size: length($side);
      @for $i from 1 through $size {
        border-#{nth($side, $i)}: 1px $bs $bc; /*no*/
      }
    }
  }

  @media (-webkit-min-device-pixel-ratio: 2) {
    &:after {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
      border-radius: #{$br * 2}px; /*no*/
    }
  }

  @media (-webkit-device-pixel-ratio: 1.5) {
    // 解决1.5屏幕下某些边框不显式问题，小数位多写几位
    &:after {
      width: 150%;
      height: 150%;
      transform: scale(0.6666);
      transform-origin: 0 0;
      border-radius: #{$br * 1.5}px; /*no*/
    }
  }

  @media (-webkit-device-pixel-ratio: 3) {
    &:after {
      width: 300%;
      height: 300%;
      transform: scale(0.3333);
      transform-origin: 0 0;
      border-radius: #{$br * 3}px; /*no*/
    }
  }
}

/* 上下左右居中 */
@mixin center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 水平居中 */
@mixin hCenter($width) {
  width: $width; /*no*/
  margin: 0 auto;
}
/* 1/2布局 */
@mixin space-between() {
  flex-direction: row;
  justify-content: space-between;
}
/* flex布局 */
@mixin flex($flex) {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: $flex;
  -moz-justify-content: $flex;
  -webkit-justify-content: $flex;
  justify-content: $flex;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-lines: multiple;
  /* 12版 */
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

// 设置宽高
@mixin wh($wid, $hei: $wid) {
  @if $wid {
    width: $wid; /*no*/
  }
  @if $hei {
    height: $hei; /*no*/
  }
  overflow: hidden;
}

/* 控制显示几行，多余的用省略号 */
@mixin ellipsis($row) {
  display: -webkit-box;
  /*autoprefixer: ignore next*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $row;
  overflow: hidden;
}

// 文本样式
@mixin text($cl, $lh, $fs, $ff, $fw: normal) {
  color: $cl;
  line-height: $lh; /*no*/
  font-size: $fs; /*no*/
  font-family: $ff;
  font-weight: $fw;
}
// 不传字体的文本样式
@mixin text2($cl2, $lh2, $fs2, $fw2: normal) {
  color: $cl2;
  line-height: $lh2; /*no*/
  font-size: $fs2; /*no*/
  font-weight: $fw2;
}

// 透明度设置,兼容ie
@mixin op($index) {
  opacity: $index;
  filter: alpha(opacity = ($index * 100));
}
// 左上定位
@mixin position($left, $right) {
  position: absolute;
  left: $left;
  top: $right;
}

/* 圆布局 */
@mixin circle($width, $height, $border, $border-radius) {
  width: $width; /*no*/
  height: $height; /*no*/
  border: $border; /*no*/
  border-radius: $border-radius;
}

// 盒阴影
@mixin boxSd($shadow...) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  box-shadow: $shadow;
}

// 背景图片自适应
@mixin bgAuto($url, $bottom) {
  background: url($url) no-repeat;
  background-size: 100%;
  padding-bottom: $bottom;
  height: 0;
}
//transition 兼容
@mixin transition1($s: 0.6s) {
  transition: all $s;
  -ms-transition: all $s;
  -moz-transition: all $s;
  -webkit-transition: all $s;
  -o-transition: all $s;
}
